JAVASCRIPT 通过FLOW实现类型检查,解决JS语言开发大型应用的所面临的缺陷

2023-03-15 23:50| 来源: 网络整理| 查看: 265

Flow基本的使用 Flow的认识flow的基本使用1. 通过flow官方提供的flow-remove-types 包2. 使用Babel配合些插件也可以实现3. flow开发插件4. flow 会智能的进行类型推断5. flow类型注解的使用语法6. flow会对js运行环境所提供的API进行校验

Flow的认识

Flow FACEBOOK团队推出的JS类型检查器。是为了解决JS语言的是弱类型以及动态类型的缺陷. 目前很多框架如VUE也有用到FLOW进行类型检查。了解FLOW对我们日后看VUE源码有一定的帮助.

flow实现类型检查的基本原理是启动一个服务,将代码按照flow类型检查规则进行编译,找到不符合预期的代码进行提醒.

flow的基本使用

通过npm i flow-bin -D 安装在这里插入图片描述

在代码前面添加注释@flow，应该是为了让检查工具知道从哪里开始检查在这里插入图片描述

运行npx flow 启动flow服务，让其帮忙检查代码。在这里插入图片描述 ##. flow移除类型注解当我代码写完之后，类型注解是我们不需要的，可以通过编译移除注解。

1. 通过flow官方提供的flow-remove-types 包

详细步骤请看下图 step1. 安装 flow-remove-types step2. npx flow-remove-types 第一个参数 -d 第二个参数

第一个参数需要进行移除注解的文件所在的目录第二个参数是输出目录

在这里插入图片描述

2. 使用Babel配合些插件也可以实现

step1. npm install @babel/core @babel/cli @babel/preset-flow -D step2. 配置babelrc的配置文件在这里插入图片描述

在这里插入图片描述

3. flow开发插件

终端上显示flow类型错误毕竟不太直观，可以使用VS CODE 官方提供的 FLOW-LANGUAGE-SUPPORT 插件直接在代码处标红提醒。在这里插入图片描述

4. flow 会智能的进行类型推断

此处并没有添加类型注解，flow也会智能的提示。在这里插入图片描述

5. flow类型注解的使用语法

以下是flow基本的类型注解,详情的可以参考官网.

// 1. 原始数据类型 const num:number = ini // NaN infinity const a: void = undefined const b: null = null const c: string = '23' const d: boolean = true const e: symbol = Symbol() // 2. 定义数组类型注解 // 定义数组类型的时候需要指定数组中元素的类型 const arr: Array = [1, 2, 3, 4] const arr: number[] = [34, 3423, 44] // [string, number] 表示当前数组只能有两位，第一个是字符串，第二个是数字。 const arr: [string, number] = ['hh', 3434] // 3. 定义对象类型注解 // 表示该定义的该对象必须要有name和age这两个成员， // 并且name键的值必须是string，age的值必须是number const obj: { name?: string, age: number } = { name: 'reborn', age: 18, cc: 13 } // 表示定义的该对象的key必须是string类型,值必须是string const obj1: { [string]: string } = { // [Symbol()] : '332' // 会报错 name: 'reborn' } // 表示该对象的name值是可选的 const obj2: { name?: string, age: number } = { name: 'reborn', age: 18, cc: 13 } // 4. 对于函数类型的限制 // 1. 此处定义返回的是number类型 function foo1(): number { return 100 } // 2. 没有返回值应该标注为void function foo2(): void { log(100) } // 3. 函数参数直接在形参后面接上： function foo3(name: string): void { log(100) } // 4. 函数作为参数 function foo4(callback: (string, number) => void) { callback('3423', 100) } foo4((str, num) => { log(str, num) }) // 5. 特殊类型 // 当前变量只能够是 success error warning 三者之一 const type: 'success' | 'error' | 'warning' = 'success' // 表示当前age变量只能够是string 或是number类型 const age: string | number = '3' // 表示number变量可以为字符串，也可以是null 或是undefined；相当于 string | undefined | null const number: ?string = 'reborn' // 表示当前变量weight使用的类型注解是type关键字所定义的StringOrNumber的类型注解 type StringOrNumber = number | string const weight: StringOrNumber = '180' // 6. 特殊类型 // mixed any 表示都可以接受任何数据类型 // mixed any的区别是 mixed还是属于强类型 function fn1(val: mixed) { // 类型未明确前是不能够调用方法的 // val.toString() // 会提醒类型检查 // 可以使用类型判断 if (typeof val === 'string') { val.toString() } else if(typeof val === 'number') { val * val } } // any属于弱类型 function fn2(val: any) { } 6. flow会对js运行环境所提供的API进行校验

在这里插入图片描述

【本文地址】

公司简介

联系我们